<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Jess Legaspi</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
</head>




<script>  //This script will preload all images that are in the Body element.
$(document).ready(function () {$("body").queryLoader2(); //refers to a function found in attached js file jquery.queryloader2.js
	}); </script>


<body onLoad="hideThis()">  <!--Hide this is defined below, hides camera element and makes a button visible to reveal it -->





<div class="container"> <!-- placeholder for entire layout -->

<div class="content">

<div id="navigation" class="navlist"> 
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">about</a></li>
          <li><a href="portfolio.html">porfolio</a></li>
          <li><a href="#client_login">client login</a> </li>
          <a href="#book_a_session">Book A Session </a>
        </ul> 
 </div>


	

	<div id="sidebar"><a href="#SocialMedia" id="mediaButt"> <img onLoad="hideThis()" id="mediaButtIMG" src="images/socialMedial.png"> </a></div> 


	<!-- jQuery handles to place the background images -->
    <!--bg images are changed in non visible slot, then visable slot is faded out revealing new background -->

	<div id="backgroundImages">

		<div id="bgIMG_slot1" class="bgImage"> </div>  
        <div id="bgIMG_slot2" class="bgImage"> </div>
	</div>

<div id="logo"> <img src="images/jess.png" >  </div>

<div id="midBar"><!--This is visible behind the camElement after clicking button--></div>

<!--Begin Camera Element -------------------------->
	<div id="cameraElement">
		
        <div id="toplayerfilm"></div>
		<img  id="menu" src="images/camElement.png" alt="" width="416" height="266" class="DLSRmenu">

		<!-- Two image slots just like the background slideshow 
        displays identical images. -->
        <div id="camIMG_slot1" class="camImage"></div>
        <div id="camIMG_slot2" class="camImage"></div>
	
    	<!-- Directional Pad / Slideshow controls -->
		<div id="control-placeholder">
            <div id="controls">
				<div id="back" class="btn"></div>
				<div id="pauseplay" class="btn"></div>
				<div id="next" class="btn"></div>
			</div>
        </div>
            
       	<div id="sidebuttons">
              <!-- (Social Media Buttons) -->
              <a href="#" target="_blank" id="butt1" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt2" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt3" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt4" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt5" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt6" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt7" class="sidebutt"> </a>
              <a href="#" target="_blank" id="butt8" class="sidebutt"> </a>
              <a href="#hideBar" id="hideButt"></a>
		</div>
		<div id="screenDisplay"> </div>
        
    </div>
<!-- End Camera Element ------------------------------------>








<!--  Over IMG Text.  Remove Coments to use --> 
 <!--
    <div id="headertxt">
		<p class="caption">
			<span id="firstline"></span>
			<a href="#" id="secondline"></a>
		</p>
		<p class="pictured">
			Pictured:
			<a href="#" id="pictureduri"></a>
		</p>
	</div>  END TEXT -->



 
<!--End Content --> 
 </div>
<!--End of Container-->
</div>


<div id="preloader">
<img src="images/slideshow/DSC_0128.jpg">
<img src="images/slideshow/DSC_3405_2texture.jpg">
<img src="images/slideshow/DSC_9364texture.jpg">
<img src="images/slideshow/DSC_4197.jpg">
<img src="images/back.fw.png">
<img src="images/camElement.png">
<img src="images/facebook.fw.png">
<img src="images/google.fw.png">
<img src="images/hide.fw.png">
<img src="images/jess.png">
<img src="images/linkedin.fw.png">
<img src="images/next.fw.png">
<img src="images/play.fw.png">
<img src="images/rss.fw.png">
<img src="images/skype.fw.png">
<img src="images/socialMedial.png">
<img src="images/twitter.fw.png">
<img src="images/wordpress.fw.png">
<img src="images/youtube.fw.png">
</div>







</body>

<!-- Document Specific JavaScript -->


<script>

//varriables used for hideThis function

var mBar = document.getElementById("midBar");
var tFilm = document.getElementById("toplayerfilm");
var camIMG1 = document.getElementById("camIMG_slot1");
var camIMG2 = document.getElementById("camIMG_slot2");
var menu = document.getElementById("menu");
var sButts = document.getElementById("sidebuttons");
var controls = document.getElementById("control-placeholder");
var topBar = document.getElementById("topbar");
var hideButt= document.getElementById("hideButt");
var unhideButt = document.getElementById("mediaButt");

//varriables used for side buttons on camera element

var butt1 = document.getElementById("butt1"); 
var butt2 = document.getElementById("butt2");
var butt3 = document.getElementById("butt3"); 
var butt4 = document.getElementById("butt4"); 
var butt5 = document.getElementById("butt5"); 
var butt6 = document.getElementById("butt6"); 
var butt7 = document.getElementById("butt7"); 
var butt8 = document.getElementById("butt8");
var buttBack = document.getElementById("back");
var buttPlay = document.getElementById("pauseplay");
var buttNext = document.getElementById("next");
var sDisplay = document.getElementById("screenDisplay");


//Listening Events Used for Side Buttons

butt1.addEventListener('mouseover', displayFacebook, false);
butt1.addEventListener('mouseout', goDefault, false); 
butt2.addEventListener('mouseover', displaytwitter, false);
butt2.addEventListener('mouseout', goDefault, false); 
butt3.addEventListener('mouseover', displaygoogle, false);
butt3.addEventListener('mouseout', goDefault, false); 
butt4.addEventListener('mouseover', displaywordpress, false);
butt4.addEventListener('mouseout', goDefault, false); 
butt5.addEventListener('mouseover', displayskype, false);
butt5.addEventListener('mouseout', goDefault, false); 
butt6.addEventListener('mouseover', displayyoutube, false);
butt6.addEventListener('mouseout', goDefault, false); 
butt7.addEventListener('mouseover', displaylinkedin, false);
butt7.addEventListener('mouseout', goDefault, false); 
butt8.addEventListener('mouseover', displayrss, false);
butt8.addEventListener('mouseout', goDefault, false); 
buttBack.addEventListener('mouseover', displayBack, false);
buttBack.addEventListener('mouseout', goDefault, false); 
buttPlay.addEventListener('mouseover', displayPlay, false);
buttPlay.addEventListener('mouseout', goDefault, false);
buttNext.addEventListener('mouseover', displayNext, false);
buttNext.addEventListener('mouseout', goDefault, false);
hideButt.addEventListener('mouseover',displayHide, false);
hideButt.addEventListener('mouseout', goDefault, false);
hideButt.addEventListener('click',hideThis,false);
unhideButt.addEventListener('click',unHide, false);

//Functions for changing display on mouseover of buttons

 function displayFacebook() {
sDisplay.className = "facebook"; }

function displaytwitter() {
sDisplay.className = "twitter"; }

function displaygoogle() {
sDisplay.className = "google"; }

function displaywordpress() {
sDisplay.className = "wordpress"; }

function displayskype() {
sDisplay.className = "skype"; }

function displayyoutube() {
sDisplay.className = "youtube"; }

function displaylinkedin() {
sDisplay.className = "linkedin"; }

function displayrss() {
sDisplay.className = "rss"; }

function displayBack() {
sDisplay.className = "back"; }

function displayPlay() {
sDisplay.className = "play"; }

function displayNext() {
sDisplay.className = "next"; }

function displayHide () {
sDisplay.className = "hide"; }

function goDefault() {
	sDisplay.className = "default"; }


//Function to hide/revele the camera element


function hideThis() {
mBar.className="hidden";
tFilm.className="hidden";
camIMG1.className="hidden";
camIMG2.className="hidden";
menu.className="hidden";
sButts.className="hidden";
sDisplay.className="hidden";
controls.className="hidden";
mediaButt.className="unhide";
}



function unHide() {
mBar.className="unhide";
tFilm.className="unhide";
camIMG1.className="camImage";
camIMG2.className="camImage";
menu.className="DLSRmenu";
sButts.className="unhide";
sDisplay.className="unhide";
controls.className="unhide";
mediaButt.className="hidden";	
}

</script>

</html>